<template>
  <el-table
    :data="data"
    class="table-list"
    border
    style="width: 100%"
    :row-style="showTr">
    <el-table-column align="center" show-overflow-tooltip v-for="(column, index) in columns" :key="column.dataIndex"
      :label="column.text">
      <template slot-scope="scope">
        <span v-if="spaceIconShow(index)" :key="space.id" v-for="(space) in scope.row._level" class="ms-tree-space"></span>
        <div style="display: inline-block" class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="has-child iconfont icon-arrow-right-copy" aria-hidden="true"></i>
          <i v-if="scope.row._expanded" class="has-child iconfont icon-jiantou-copy-copy" aria-hidden="true"></i>
        </div>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        <span v-if="column.dataIndex === 'id'">
          {{scope.row.id}}
        </span>
        <span v-if="column.dataIndex === 'menuText'">
          {{scope.row.menuText}}
        </span>
        <span v-if="column.dataIndex === 'icon'">
          <i :class="scope.row.icon" class="item_icon"></i>
        </span>
        <span v-if="column.dataIndex === 'menuType'">
          {{scope.row.menuType}}
        </span>
        <span v-if="column.dataIndex === 'menuUrl'">
          {{scope.row.menuUrl}}
        </span>
        <span v-if="column.dataIndex === 'permission'">
          {{scope.row.permission}}
        </span>
        <!--{{scope.row.icon = scope.row.icon ? "" : ""}}-->
        <!--{{scope.row[column.dataIndex]}}-->
        <!--{{JSON.stringify(scope.row[column.dataIndex.icon])}}-->
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" v-if="treeType === 'normal'" width="260">
      <template slot-scope="scope">
        <!--<button type="button" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
          <!--<router-link-->
            <!--:to="{ path: requestUrl + 'edit', query: {id: scope.row.Oid} }"-->
            <!--tag="span">-->
            <!--编辑-->
          <!--</router-link>-->
        <!--</button>-->
        <div style="display: inline-block;">
          <a title="编辑" class="icon" href="javascript:;">
          <router-link :to="{name: 'MenuEdit', params: {id: scope.row.id, menuText:scope.row.menuText, pid:scope.row.pid, menuType:scope.row.menuType}}">
            <i class="iconfont icon-tianxie"></i>
          </router-link>
          </a>
        <a title="删除" class="icon" href="javascript:;" @click="handleDelete(scope.row.id)">
          <i class="iconfont icon-shanchu"></i>
        </a>
        <a title="新增" class="icon" href="javascript:;">
          <router-link :to="{name: 'MenuAdd', params: {id: scope.row.id, menuText:scope.row.menuText, pid:scope.row.pid}}">
          <i class="iconfont icon-jiahao"></i>
          </router-link>
        </a>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import Utils from '../utils/index.js';
import { deleteMenuById } from '@/apis/basics/menu';
//  import Vue from 'vue'
export default {
    name: 'tree-grid',
    props: {
    // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
        treeStructure: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
        // 这是相应的字段展示
        columns: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 这是数据源
        dataSource: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
        requestUrl: {
            type: String,
            default: function () {
                return '';
            }
        },
        // 这个是是否展示操作列
        treeType: {
            type: String,
            default: function () {
                return 'normal';
            }
        },
        // 是否默认展开所有树
        defaultExpandAll: {
            type: Boolean,
            default: function () {
                return false;
            }
        }
    },
    data () {
        return {};
    },
    computed: {
    // 格式化数据源
        data: function () {
            let me = this;
            if (me.treeStructure) {
                let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll);
                data.forEach((value, index) => {
                    switch (value.sysType) {
                    case 1:
                        value.sysType = '大数据处理';
                        break;
                    case 2:
                        value.sysType = '大数据支撑';
                        break;
                    case 3:
                        value.sysType = '大数据共享交换';
                        break;
                    case 4:
                        value.sysType = '大数据服务';
                        break;
                    case 5:
                        value.sysType = '大数据治理';
                        break;
                    }
                    switch (value.menuType) {
                    case 1:
                        value.menuType = '目录';
                        break;
                    case 2:
                        value.menuType = '菜单';
                        break;
                    case 3:
                        value.menuType = '按钮';
                        break;
                    }
                });
                return data;
            }
            return me.dataSource;
        }
    },
    methods: {
    // 显示行
        showTr: function ({ row, index }) {
            let show = (row._parent ? (row._parent._expanded && row._parent._show) : true);
            row._show = show;
            return show ? '' : 'display:none;';
        },
        // 展开下级
        toggle: function (trIndex) {
            let me = this;
            let record = me.data[trIndex];
            record._expanded = !record._expanded;
        },
        // 显示层级关系的空格和图标
        spaceIconShow (index) {
            let me = this;
            if (me.treeStructure && index === 0) {
                return true;
            }
            return false;
        },
        // 点击展开和关闭的时候，图标的切换
        toggleIconShow (index, record) {
            let me = this;
            if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
                return true;
            }
            return false;
        },
        handleDelete (scopeId) {
            let id = scopeId;
            this.$msgbox.confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                type: 'warning'
            }).then(() => {
                this.isLoading = true;
                deleteMenuById(id).then(data => {
                    // console.log(data)
                    if (data.code === 100) {
                        this.$message.success('删除成功');
                        // 调用父组件的方法，刷新数据
                        this.$parent.getDataList();
                        // this.handleDelete(this.treeDataSource, id)
                    } else {
                        this.$message.error(data.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            }).finally(() => {
                this.isLoading = false;
            }).catch(() => {
            });
        }
    }
};
</script>
<style scoped>
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  table td{
    line-height: 26px;
  }

</style>
